import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_tableview/flutter_tableview.dart';
import 'package:ytbusiness/utils/helper.dart';
import 'package:ytbusiness/utils/screen_adaptation.dart';
import 'package:ytbusiness/widgets/simple_select_date.dart';

//账单明细
class BillDetails extends StatefulWidget {
  @override
  _BillDetailsState createState() => _BillDetailsState();
}

class _BillDetailsState extends State<BillDetails> {
  String selectStr = ""; //交易类型

  GlobalKey scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          '账单明细',
          style: TextStyle(
            color: Colors.black,
            fontSize: setSp(18),
          ),
        ),
        actions: [
          InkWell(
            onTap: () async {
              print('交易类型 !!!!');
              bouncedBottomSheet(context: context);
            },
            child: Container(
              padding: EdgeInsets.only(
                right: setWidth(15),
              ),
              alignment: Alignment.center,
              child: Text(
                '交易类型',
                style: TextStyle(
                  color: Color(0xff010015),
                  fontSize: setSp(14),
                ),
              ),
            ),
          ),
        ],
      ),
      body: Container(
        color: Colors.white,
        child: FlutterTableView(
          sectionCount: 3,
          rowCountAtSection: _rowCountAtSection,
          sectionHeaderBuilder: _sectionHeaderBuilder,
          cellBuilder: _cellBuilder,
          sectionHeaderHeight: _sectionHeaderHeight,
          cellHeight: _cellHeight,
        ),
      ),
    );
  }

  int _rowCountAtSection(int section) {
    if (section == 0) {
      return 5;
    } else if (section == 1) {
      return 10;
    } else {
      return 20;
    }
  }

  // Section header widget builder.
  Widget _sectionHeaderBuilder(BuildContext context, int section) {
    return InkWell(
      onTap: () {
        print('区头点击事件!!! section:$section');
        _selectTime();
//        print('====== JsonDecoder().convert(PickerData) = ${JsonDecoder().convert(PickerData3)}');
//        Picker picker = Picker(
//            adapter: PickerDataAdapter<String>(pickerdata: JsonDecoder().convert(PickerData3)),
//            changeToFirst: false,
//            textAlign: TextAlign.left,
//            textStyle: TextStyle(color: Colors.black),
//            selectedTextStyle: TextStyle(color: Colors.black),
//            cancelText: '取消1',
//            cancelTextStyle: TextStyle(
//              color: Colors.red,
//              fontSize: setSp(15),
//            ),
//            confirmText: '确定1',
//            confirmTextStyle: TextStyle(
//              color: Colors.yellow,
//              fontSize: setSp(17),
//            ),
//            hideHeader: false, // 表头是否显示
//            looping: false, // 头尾链接
//            columnPadding: EdgeInsets.all(8.0),
//            onConfirm: (Picker picker, List value) { // 确定选择
//              print(value.toString());
//              print(picker.getSelectedValues());
//            },
//            onSelect: (Picker picker, int index, List value) {
//              print('****** picker = $picker  index = $index   value = $value');
//            }
//        );
//        picker.show(scaffoldKey.currentState);
      },
      child: Container(
        padding: EdgeInsets.only(
          left: setWidth(15),
        ),
        color: Color(0xfff0f0f0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  '2020年11月',
                  style: TextStyle(
                    color: Color(0xff595959),
                    fontSize: setSp(17),
                  ),
                ),
                SizedBox(
                  width: setWidth(5),
                ),
                Image.asset(
                  'assets/images/downBlack_image.png',
                  width: setWidth(15),
                  height: setWidth(8),
                  fit: BoxFit.fill,
                ),
              ],
            ),
            SizedBox(
              height: setWidth(5),
            ),
            Text(
              '支出￥21897.00  收入￥36850.00',
              style: TextStyle(
                color: Color(0xff595959),
                fontSize: setSp(14),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // cell item widget builder.
  Widget _cellBuilder(BuildContext context, int section, int row) {
    return InkWell(
      onTap: () {
        print('cell 点击事件!!! section:$section row:$row');
      },
      child: Container(
        padding: EdgeInsets.only(
          right: setWidth(15),
        ),
        child: Row(
          children: [
            Image.asset(
              'assets/images/headPortrait_image.png',
              width: setWidth(44),
              height: setWidth(44),
              fit: BoxFit.fill,
            ),
            SizedBox(
              width: setWidth(9),
            ),
            Expanded(
              child: Container(
                height: setWidth(80),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Color(0xffeeeeee),
                      width: setWidth(0.5),
                    ),
                  ),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '中国平安保险股份有限...',
                          style: TextStyle(
                            color: Color(0xff010015),
                            fontSize: setSp(15),
                          ),
                        ),
                        Text(
                          '+3685.00',
                          style: TextStyle(
                            color: Color(0xff1a79ff),
                            fontSize: setSp(15),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: setWidth(5),
                    ),
                    Text(
                      '11月1日 12:16',
                      style: TextStyle(
                        color: Color(0xff999999),
                        fontSize: setSp(12),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // Each section header height;
  double _sectionHeaderHeight(BuildContext context, int section) {
    return setWidth(80);
  }

  // Each cell item widget height.
  double _cellHeight(BuildContext context, int section, int row) {
    return setWidth(80);
  }

  Future bouncedBottomSheet({
    BuildContext context,
  }) {
    return showModalBottomSheet(
      backgroundColor: Color(0xfffafafa),
      context: context,
      builder: (ctx) {
        return Container(
          height: ScreenUtil.bottomBarHeight + setWidth(345),
          child: Column(
            children: [
              Container(
                height: setWidth(55),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                  color: Color(0xffeeeeee),
                ))),
                alignment: Alignment.center,
                child: Text(
                  '选择交易类型',
                  style: TextStyle(
                    color: Color(0xff010015),
                    fontSize: setSp(16),
                  ),
                ),
              ),
              SizedBox(
                height: setWidth(25),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: setWidth(15)),
                child: Wrap(
                  direction: Axis.horizontal,
                  spacing: setWidth(7),
                  runSpacing: setWidth(7),
                  alignment: WrapAlignment.start,
                  crossAxisAlignment: WrapCrossAlignment.end,
                  children: [
                    '全部',
                    '充值',
                    '提现',
                    '订单服务费',
                  ]
                      .asMap()
                      .map((index, value) {
                        return MapEntry(
                          index,
                          ClipRRect(
                            borderRadius: BorderRadius.circular(setWidth(4)),
                            child: InkWell(
                              onTap: () {
                                print('点击事件!!!! value = $value');
                                setState(() {
                                  selectStr = value;
                                });
                                Navigator.pop(context);
                              },
                              child: Container(
                                width: setWidth(110),
                                height: setWidth(65),
                                color: value == selectStr
                                    ? Color(0xff1a79ff)
                                    : Colors.white,
                                alignment: Alignment.center,
                                child: Text(
                                  value,
                                  style: TextStyle(
                                    color: value == selectStr
                                        ? Colors.white
                                        : Colors.black,
                                    fontSize: setSp(16),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        );
                      })
                      .values
                      .toList(),
                ),
              ),
              SizedBox(
                height: setWidth(69),
              ),
              Container(
                height: setWidth(8),
                color: Color(0xffe9e9eb),
              ),
              InkWell(
                onTap: () {
                  print('取消取消取消取消取消 点击事件!!!!');
                  Navigator.pop(context);
                },
                child: Container(
                  color: Colors.white,
                  height: setWidth(49),
                  alignment: Alignment.center,
                  child: Text(
                    '取消',
                    style: TextStyle(
                      color: Color(0xff323232),
                      fontSize: setSp(16),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  //选择时间
  _selectTime() {
    return showModalBottomSheet(
      backgroundColor: Color(0xfffafafa),
      context: context,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(13),
          topRight: Radius.circular(13),
        ),
      ),
      builder: (ctx) {
        return SimpleSelectDate(
          onCheckUpdate: (val) {
            toast(val);
          },
        );
      },
    );
  }
}
